<template>
<div>
    <div class="BackColor">
       <img :src="require('@/assets/default/background/'+BackImage.src)"  class="BackImage" v-if="BackImage.type==1">
       <img  :src="BackImage.src" class="BackImage" v-else/>
    </div>

    <div id="Content" class="flex">
        <img :src="User.headphoto" class="headphoto">
        <div class="TextCenter overflow" id="name">{{User.username}}</div>
        <!-- <div id="Funs" class="flex">
            <button v-for="item in funData" :key="item.id" class="flex Fun">
                <div class="TextCenter overflow">{{item.name}}</div>
                <div class="TextCenter overflow">{{item.value}}</div>
            </button>
        </div> -->

    </div>
</div>
</template>
<script>
import {mapState} from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
            funData:[
                {id:1,name:'文章',value:1},
                {id:2,name:'关注',value:1},
                {id:3,name:'粉丝',value:1},
            ]
        }
     },
     computed:{
        ...mapState('Setting',['BackImage']),
        ...mapState('Login',['User'])
     },
  }
</script>
<style scoped lang='less'>

.BackImage{
    opacity: 0.7;
}
#Content{
    width: 100%;
    position: relative;
    z-index: 5;

    .headphoto{
       width: 80px;
       height:80px;
       border: 5px solid white;
    }

    #name{
        font-size: 25px;
        font-weight: 600;
        color: white;
        margin: 10px 0 ;
    }

    #Funs{
        width: 80%;
        justify-content: space-between;

        .Fun{
            font-size: 16px;
            font-weight: 600;
            color: white;
            border-radius: 50%;
            padding: 10px 5px;

            div{
               margin-top: 5px;
            }
            // background:var(--TranslucentBack);
        }
        .Fun:hover{
            color: #3CC5BC;
        }
    }
}


</style>